<template>
  <!-- // 分配角色 -->
  <div>
    ==={{ roleIds }}==={{ curEmployeId }}
    <el-checkbox-group v-model="roleIds">
      <el-checkbox v-for="item in rolesList" :key="item.id" :label="item.id">{{
        item.name
      }}</el-checkbox>
      <!-- <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox> -->
    </el-checkbox-group>

    <div style="margin-top: 20px; text-align: right">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getUserDetailById } from '@/api/user'
import { assignRoles } from '@/api/employees'
import { getRoles } from '@/api/setting'
export default {
  props: {
    curEmployeId: String,
    showDialogRole: Boolean
  },
  data() {
    return {
      roleIds: [],
      rolesList: []
    }
  },
  created() {
    this.getRoles()
    /* 获取员工信息===包含员工所拥有的角色 */
    this.loadUserDetailById()
  },
  methods: {
    async getRoles() {
      // / 3-获取所有的角色列表
      const res = await getRoles(1, 50)
      // console.log(res, 888)
      this.rolesList = res.data.rows
    },
    closeDialog() {

    },
    async loadUserDetailById() {
      const res = await getUserDetailById(this.curEmployeId)
      console.log(res, 777)
      this.roleIds = res.data.roleIds
    },
    // 分配角色确认按钮
    async submit() {
      const res = await assignRoles({
        id: this.curEmployeId,
        roleIds: this.roleIds

      })
      console.log(res)
      this.$emit('update:showDialogRole', false)
    }

  }
}
</script>
